<template>
	<view class="index">

		<view class="navs">

			<view v-for=" ctg in ctgsHot" :key="ctg.id" class="navs-item">
				<!-- <image :src="`http://127.0.0.1:8090/api/files/${ctg.collectionId}/${ctg.id}/${ctg.img}`"
					mode="aspectFit"></image> -->

				<text>

					{{ctg.sub_name}}
				</text>
				<text v-if="ctg.desc">
					{{ctg.desc}}
				</text>
				<text v-else>
					无
				</text>
			</view>
		</view>


		<view class="ctgs">
			<view v-for=" ctg in ctgsMain" :key="ctg.id" class="ctgs-item">

				<navigator
					:url="'/pages/posts/posts?filter='+encodeURIComponent(`(ctg='${ctg.id}')`)+'&title='+ctg.name">
					{{ctg.name}}
				</navigator>

				<!-- 
				<navigator :url="`/pages/posts/posts?filter=(ctg='${ctg.id}')&title=${ctg.name}`">
					{{ctg.name}}
				</navigator> -->

			</view>

		</view>


		<view class="ctgs">
			<view v-for=" area in areas" :key="area.id" class="ctgs-item">


				{{area.name}}

			</view>

		</view>
	</view>
</template>
<script setup>
	import {
		computed,
		ref
	} from 'vue';

	import {
		getCtgsApi,
		getAreasApi
	} from '../../api/index.js';


	const ctgs = ref([]);
	const areas = ref([]);

	// 人气导航
	const ctgsHot = computed(() => ctgs.value.filter(el => el.is_hot));
	// 主导航
	const ctgsMain = computed(() => ctgs.value.filter(el => el.is_main));


	async function getNavs() {
		const res = await getCtgsApi();
		ctgs.value = res.data.items;
	}
	getNavs();


	async function getAreas() {
		const res = await getAreasApi();
		areas.value = res.data.items;
	}
	getAreas();
</script>
<style lang="scss" scoped>
	.index {
		.ctgs {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			margin: 40rpx 0;


			.ctgs-item {
				width: 300rpx;
				border: solid 1px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.navs {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;

			.navs-item {
				width: 164rpx;
				border: solid 1px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
				}
			}
		}
	}
</style>